<template>
	<view class="main">
		<view class="detail-card">
			<view class="count-wrapper">
                <view class="left">
                	<view class="text">{{OtherData.isLower==1?'库存量':'总数量'}}</view>
                	<view class="count">
                		<view class="num">{{OtherData.qty}}</view>
                	</view>
                </view>
				<view class="right">
					<view class="text">{{OtherData.isLower==1?'库存金额':'总金额'}}</view>
					<view class="count">¥{{OtherData.total}}</view>
				</view>				
			</view>
		</view>
		<view class="wrapper-main">
			<mescroll-uni
				ref="mescrollRef"
				@init="mescrollInit"
				:height="listHeight"
				:down="downOption"
				@down="downRefresh"
				:up="upOption"
				@up="getData">
				<view class="cost-list">
						<view class="new-cost-item" v-for="(item, index) in datas">
							<view class="wrapper" @click="goUrl(item)">
								<view class="flex-between">
									<view class="c-name">
										{{ item.FMaterialName }}
									</view>
									<uni-icons type="forward" size="30"></uni-icons>
								</view>
								<view class="cost-list-main">
									<view>数量：{{item.Stock}}</view>
									<view v-if="item.IsLower==0">单价：{{item.Price}}</view>
									<view v-if="item.IsLower==1">金额：{{item.Total}}</view>
									<view v-else>总金额：<text class="strong">{{item.Total}}</text></view>
									<view v-if="item.IsLower==0">仓库：{{item.FStockName}}</view>
									<uni-icons class="more" type="forward" size="30"></uni-icons>
								</view>
							</view>
						</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>
<script>
import stockListItem from "./stock-list-item.vue"
import { GetGoodStock } from "@/service/api/erp.js"
import { mapState } from "vuex"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    components: {
        stockListItem,
    },
    props: {
        dataZero: {
            type: String,
            default: '0',
        },
        stockArr: {
            type: String,
            default: '',
        },
		pCodeArr: {
		    type: String,
		    default: '',
		},
		code: {
		    type: String,
		    default: '',
		},
		organizationsArr: {
		    type: String,
		    default: '',
		},
		GroupCodeArr: {
		    type: String,
		    default: '',
		},
		
    },
    computed: {
    },
    data() {
        return {
            datas: [],
			OtherData:{
				isLower:1,
				qty:0,
				total:0
			},
            allLength: 0,
            param: {
                pageNumber: 0,
                pageSize: 0,
            },
            downOption: {
                use: true,
            },
            isLoaded: false,
			sublistHeight:"300px",
        }
    },
	mounted() {
		this.getListHeight()
	},
    methods: {
        //获取列表数据
        getData(page) {
            let param = this.param
            param.pageNumber = page.num
            param.pageSize = page.size
			param.dataZero = +this.dataZero
			if(this.stockArr){
				param.stockArr = this.stockArr.split(",")
			}
			if(this.pCodeArr){
				param.pCodeArr = this.pCodeArr.split(",")
			}
			if(this.organizationsArr){
				param.organizationsArr = this.organizationsArr.split(",")
			}
			if(this.GroupCodeArr){
				param.GroupCodeArr = this.GroupCodeArr.split(",")
			}
			if(this.code){
				param.code = this.code
			}
            GetGoodStock(param).then((res) => {
                if (res.State == 1) {
                    this.mescroll.endByPage(res.Data.length, res.TotalAmout)
                    this.datas = this.datas.concat(res.Data)
					this.OtherData = res.OtherData
                    this.allLength = res.RecordAmout
                    this.isLoaded = true
					this.$forceUpdate()
                } else {
                    this.mescroll.endBySize(0, 0)
                }
            })
        },
		getListHeight() {
		    //获取商品高度
		    getElementHeight(this, ".wrapper-main", (e) => {
		        this.listHeight = e + "px"
		        this.sublistHeight = e - uni.upx2px(100) + "px"
		        this.loadOk = true
		    })
		},
        //刷新
        refresh(param) {
            if (param) {
                this.param = param
            }
            this.downRefresh()
        },
        //刷新
        downRefresh() {
            this.datas = []
            this.mescroll.resetUpScroll()
        },
		goUrl(item){
			storage.setCache("returnNum",storage.getCache("returnNum")+1)
			if(item.IsLower==1){
				this.easyGoTo('/pages/stock/detail?dataZero='+this.dataZero+'&stockArr='+this.stockArr+'&pCodeArr='+this.pCodeArr+'&organizationsArr='+this.organizationsArr+'&GroupCodeArr='+this.GroupCodeArr+'&title='+item.FMaterialName+'&code='+item.FMaterialNo)
			}else{
				this.easyGoTo("/pages_erp/new-sale/commodity-detail?id="+item.FMaterialNo + "&FStockOrgID=" + item.FStockOrgID)
			}
		}
    },
    watch: {
        type(newVal) {
            this.param.type = newVal
        },
    },
}
</script>

<style lang="scss">
.cost-list {
    // background: $color-white;
	padding: 12rpx 24rpx 24rpx 24rpx;
}
.detail-card {
    margin: 24rpx;
    height: 172rpx;
    padding: 32rpx 0 32rpx 40rpx;
    box-sizing: border-box;
    background: $app-color-main;
    color: $color-white;
    box-shadow: 0rpx 10rpx 28rpx 0rpx rgba(0, 0, 0, 0.06);
    border-radius: 22rpx;
    .sale-money {
        .text {
            margin-bottom: 12rpx;
            font-size: 28rpx;
        }
        .price {
            display: flex;
            align-items: flex-end;
            font-weight: 700;

            .unit {
                margin-bottom: 6rpx;
            }

            .num {
                margin-left: 6rpx;
                font-size: 48rpx;
            }
        }
    }
    .count-wrapper {
        display: flex;
        margin-top: 12rpx;
        .left,
        .right {
            flex: 1;
            .text {
                margin-bottom: 12rpx;
                font-size: 24rpx;
            }

            .count {
                font-weight: 700;
                font-size: 32rpx;
            }
        }

        .right {
            .count {
                display: flex;
                align-items: flex-end;
                .unit {
                    margin-bottom: 6rpx;
                    font-size: 24rpx;
                }
            }
        }
    }
}

.list-header {
    display: flex;
    align-items: center;
    height: 80rpx;
    padding-left: 32rpx;
    // padding-right: 60rpx;
    background: #ffffff;
    box-shadow: 0px 6rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;

    .left-wrapper,
    .right-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .right-wrapper {
        .h-item {
            flex: 1;
        }
    }

    .h-item {
        text-align: center;
        font-size: $size-28;
        font-weight: bold;

        &.h-name {
            margin-left: 48rpx;
            text-align: left;
        }

        &.h-turnover {
            display: flex;
            align-items: center;
        }

        &.h-profit {
            display: flex;
            align-items: center;
        }

        &.ascending {
            .caret {
                .sort-caret {
                    &.ascending {
                        border-bottom-color: $app-color-main;
                    }
                }
            }
        }

        &.descending {
            .caret {
                .sort-caret {
                    &.descending {
                        border-top-color: $app-color-main;
                    }
                }
            }
        }

        .caret {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            height: 34px;
            width: 24px;
            vertical-align: middle;
            cursor: pointer;
            overflow: initial;
            position: relative;

            .sort-caret {
                width: 0;
                height: 0;
                border: 6rpx solid transparent;
                position: absolute;
                left: 7px;

                &.ascending {
                    border-bottom-color: #434c67;
                    top: 22rpx;
                }

                &.descending {
                    border-top-color: #434c67;
                    bottom: 18rpx;
                }
            }
        }
    }
}
.cost-item {
    display: flex;
    justify-content: space-between;
    border-bottom: #ebebeb solid 1px;
    padding: 32rpx 60rpx 32rpx 0;
    margin-left: 48rpx;
    text-align: center;

    .left-wrapper,
    .right-wrapper {
        display: flex;
        flex: 1;
    }

    .right-wrapper {
        display: flex;
        justify-content: space-between;
        padding-left: 48rpx;
        .sale-money {
            margin-right: 24rpx;
        }
    }

    .c-name {
        flex: 1;
        word-break: break-all;
        text-align: left;
        margin-left: 48rpx;
        font-size: $size-28;
    }
    .c-turnover {
        .sum {
            font-size: $size-28;
        }
        .total {
            font-size: $size-24;
            color: $color-gray-3;
        }
    }
    .c-profit {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 180rpx;
        .perc {
            width: 136rpx;
            height: 46rpx;
            line-height: 46rpx;
            font-size: $size-28;
            background: #fff7eb;
            color: #ef9604;
        }
    }
}
.c-yellow {
    color: $color-yellow-1;
}
.new-cost-item{
	margin-bottom: 24rpx;
	.wrapper{
		background: $color-white;
		border-radius: 24rpx;
		padding: 24rpx;
		.flex-between{
			margin-bottom: 24rpx;
		}
		.c-name{
			font-size: 28rpx;
			font-weight: bold;
			width: 85%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.cost-list-main{
			background: #F5F5F5;
			border-radius: 12rpx;
			padding: 24rpx 32rpx 8rpx 32rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			position: relative;
			view{
				width: 50%;
				font-size:28rpx;
				padding-bottom: 16rpx;
			}
			.strong{
				font-size: 28rpx;
				color: #F1270C;
				font-weight: bold;
			}
			.more{
				position: absolute;
				right: 0;
				top: 40%;
			}
		}
	}
}
</style>
